<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs :list="list" :lineWidth="80" lineColor="#0F53AC" :activeStyle="activeStyle" :scrollable="false"
				:inactiveStyle="inactiveStyle" :itemStyle="itemStyle" @click="tabsClick" :current="current">
			</u-tabs>
			<view class="serachTop">
				<view class="sel">
					<zb-dropdown-menu :zIndex="89" active-color="#0F53AC">
						<zb-dropdown-item :options="useOption" v-model="useValue" @change="(e)=>{handleSelect(e,1)}"
							name="first">
						</zb-dropdown-item>
					</zb-dropdown-menu>
				</view>
				<u-search class="inp" placeholder="搜索风险点/风险单元名" v-model="title" height="40" shape="square"
					color="#2B2B2B" :showAction="false" @change="chaxun" @search="chaxun"></u-search>
			</view>
		</u-sticky>
		<!-- <view class="main">
			<view class="item-title" v-if="current == 1">仅展示近一个月的已完成任务</view>
			<view class="main-box" v-for="item in riksList" :key="item.id">
				<view class="top">
					<view class="top-left">
						<view class="title">{{item.pointName}}</view>
						<view class="title-right"
							:class="[item.riskLevel == 1?'title-finish':item.riskLevel == 2?'title-close':item.riskLevel == 3?'title-yellow':'title-dyz']">
							{{item.riskLevel == 1?'重大风险':item.riskLevel == 2?'较大风险':item.riskLevel == 3?'一般风险':'低风险'}}
						</view>
					</view>
					<view class="top-right">
						<view class="status">
							{{item.inspectionStatus == 0?'未巡查':'已巡查'}}
						</view>
						<view class="num" v-if="item.dangerNum">{{item.dangerNum}}</view>
						<view class="num-none" v-else>{{item.dangerNum}}</view>
					</view>
				</view>
				<view class="content">
					<view class="text">所属风险单元：{{item.unitName}}</view>
					<view class="text-box">管控时间：{{item.planDate}}-{{item.limitDate}}
						<view class="text-right">{{item.period}}</view>
					</view>
					<view class="text">管控负责人：{{item.directorNames}}</view>
				</view>
				<view class="footer" @click="handleToPatrol(item)">
					{{item.inspectionStatus == 0?'开始巡查':'查看详情'}}
				</view>
			</view>
			<u-loadmore v-if="total>6" :status="status" :line="true" />
		</view> -->

		<view class="tab-page">
			<view class="item-title" v-if="current == 1">仅展示近一个月的已完成任务</view>
			<view class="list-wrapper" v-for="item in riksList" :key="item.id" @click="handleToPatrol(item)">
				<view class="top">
					<view class="left-title">{{item.pointName}}</view>
					<view :style="{color:current == 0?'#8C8C8C':'#0F53AC'}">{{current == 0?'未巡查':'已巡查'}}</view>
					<view class="right-list" style="display: flex;">
						<view v-if="item.dangerNum" class="title-num">
							{{item.dangerNum}}
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="middle" style="margin-top: 20rpx;">所属风险单元：{{item.unitName}}</view>
				<view class="middle" style="margin-top: 20rpx;">管控时间：{{item.planDate}}-{{item.limitDate}}</view>
				<view class="middle">{{current == 0?'管控负责人':'管控人'}}：{{current == 0?item.directorNames:item.userName}}</view>
				<view class="bottom">
					<view class="title-right"
						:class="[item.riskLevel == 1?'title-finish':item.riskLevel == 2?'title-close':item.riskLevel == 3?'title-yellow':'title-dyz']">
						{{item.riskLevel == 1?'重大风险':item.riskLevel == 2?'较大风险':item.riskLevel == 3?'一般风险':'低风险'}}
					</view>
					<view class="tags">{{item.period}}</view>
				</view>
			</view>
		</view>
		<u-loadmore v-if="total>6" :status="status" :line="true" />

		<view class="empty-data" v-if="riksList.length==0">
			<u-empty mode="data" :marginTop="100"></u-empty>
		</view>
		<view class="bottom-subside" style='height: 22px;'></view>
		<view class="fixed-btn" @click="togoRepairpage" v-if="current==0">
			<view class="btn-icon iconfont icon-app-saoma">
			</view>
			<view class="btn-txt">快速巡查</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				onoff: true,
				showDropdown: true,
				status: 'loadmore',
				//搜索值
				title: '',
				//按钮样式
				actionStyle: {
					color: '#0F53AC',
					fontSize: "32rpx",
				},
				inputStyle: {
					fontSize: '32rpx',
				},
				activeStyle: {
					color: '#0F53AC',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				},
				inactiveStyle: {
					color: '#8c8c8c',
					transform: 'scale(1)'
				},
				itemStyle: {
					paddingLeft: '30rpx',
					paddingRight: '30rpx',
					paddingTop: '24rpx',
					paddingBottom: '24rpx',
					height: '48rpx'
				},
				current: 0,
				list: [{
					name: '未完成',
				}, {
					name: '已完成',
				}],

				//风险等级option
				useOption: [{
						text: '风险等级',
						value: ''
					},
					{
						text: '重大风险',
						value: 1
					},
					{
						text: '较大风险',
						value: 2
					},
					{
						text: '一般风险',
						value: 3
					},
					{
						text: '低风险',
						value: 4
					},
				],
				useValue: '',
				//巡查状态option
				eqOption: [{
						text: '全部状态',
						value: ''
					},
					{
						text: '未巡查',
						value: 0
					},
					{
						text: '巡查中',
						value: 1
					}
				],
				eqValue: '',
				params: {
					pn: 1,
					ps: 6,
					type: 1, //必须 1.未完成；2.已完成
					riskLevel: '', // 风险等级；-1.全部；1.重大风险；2.较大风险；3.一般风险；4.低风险；
				},
				riksList: [],
				pages: 1,
				total: 0,
				flag:false
			}
		},

		onLoad() {
			this.params.pn = 1;
			this.riksList = []
			this.params.pointId = ''
			this.getList()
		},
		onShow() {
			var pages = getCurrentPages(); // 获取当前页面栈
			var currentPage = pages[pages.length - 1]; // 当前页面
			if (currentPage.data.needNotData) {
				currentPage.data.needNotData = false;
				this.params.pn = 1;
				this.riksList = []
				// this.params.pointId = ''
				this.getList()
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.params.pn = 1;
			this.riksList = []
			this.getList()
		},
		methods: {
			//2.搜索功能
			//change
			chaxun() {
				//清空数据
				this.total = 0
				this.riksList = []
				this.params.pn = 1
				this.params.keyword = this.title
				if(!this.flag){
					this.getList()
				}
			},
			//cancel
			cancel() {
				this.title = ''
				this.total = 0
				this.riksList = []
				this.params.pn = 1
				this.params.keyword = ''
				this.getList()
			},
			//3.下拉选择
			handleSelect(e, type) {
				//清空数据
				this.total = 0
				this.riksList = []
				this.params.pn = 1
				//传参
				if (type == 1) {
					this.params.riskLevel = e.value
				} else if (type == 2) {
					this.params.inspectionStatus = e.value
				}
				//查询表单
				if(!this.flag){
					this.getList()
				}
			},
			tabsClick(e) {
				// 切换清空id
				if (this.current != e.index) {
					this.params.pointId = ''
				}
				this.current = e.index
				this.params.pn = 1;
				this.useValue = ''
				this.params.riskLevel = ''
				this.title = ''
				this.riksList = []
				this.params.type = e.index + 1;
				if (e.index == 1) {
					this.params.inspectionStatus = ''
				}
				if(!this.flag){
					this.getList()
				}
				
			},
			getList() {
				this.flag = true
				
				uni.$u.http.post(`/check/mobile/riskInspectionTask/mobileInspectionTaskList`, this.params).then(res => {
					if (res.code == 0) {
						this.flag = false
						this.riksList = this.riksList.concat(res.data.records)
						this.pages = res.data.pages;
						this.total = res.data.total;
						uni.stopPullDownRefresh()
					}
				}).catch(err => {})
			},
			handleToPatrol(item) {
				if (item.inspectionStatus == 1) {
					// 已巡查
					uni.navigateTo({
						url: `/pages/subPackagesA/riskInspection/riskPatrol?taskId=${item.id}&pointName=${item.pointName}&unitName=${item.unitName}&isInspec=${1}`
					})
				} else {
					// 未巡查
					uni.navigateTo({
						url: `/pages/subPackagesA/riskInspection/riskPatrol?taskId=${item.id}&pointName=${item.pointName}&unitName=${item.unitName}&isInspec=${0}`
					})
				}
			},
			togoRepairpage() {
				const that = this
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['barCode', 'qrCode', 'datamatrix', 'pdf417'],
					autoDecodeCharset: false,
					autoZoom: false,
					barCodeInput: false,
					success: function(res) {
						let codeInfo = res.result.split('id=')[1]
						//这里获取扫码信息并且对扫码信息进行解析

						that.getRiksList(codeInfo)
					},
					fail: function(error) {
					}
				});
			},
			//获取巡查任务列表
			getRiksList(codeInfo) {
				this.params.pn = 1
				this.params.pointId = codeInfo
				uni.$u.http.post(`/check/mobile/riskInspectionTask/mobileInspectionTaskList`, this.params).then(res => {
					if (res.code == 0) {
						//跳转到详情页面
						if (res.data.records.length === 1) {
							const {
								id,
								pointName,
								unitName
							} = res.data.records[0]
							uni.navigateTo({
								url: `/pages/subPackagesA/riskInspection/riskPatrol?taskId=${id}&pointName=${pointName}&unitName=${unitName}&isInspec=${0}`
							})
						} //渲染新的列表
						else if (res.data.records.length > 1) {
							this.riksList = res.data.records
							this.pages = res.data.pages;
							this.total = res.data.total;
						} else {
							uni.$u.toast('暂时没有管控任务')
							// this.riksList = []
						}
						uni.stopPullDownRefresh()
					}
				}).catch(err => {})
			},
		},
		onReachBottom() {
			if (this.params.pn >= this.pages) return;
			this.status = 'loading';
			this.params.pn = ++this.params.pn;
			setTimeout(() => {
				this.getList()
				if (this.params.pn >= this.pages) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		}
	}
</script>

<style lang="scss" scoped>
	.list-wrapper {
		background-color: #fff;
		padding: 40rpx 32rpx;
		position: relative;
		border-bottom: 16rpx solid #F5F5F5;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left-title {
				width: 70%;
				font-size: 32rpx;
				font-weight: 500;
				color: #2B2B2B;
				text-align: left;
				word-wrap: break-word;
				word-break: break-all;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

			}

			.title-num {
				width: 18px;
				height: 18px;
				border-radius: 100%;
				background: #FA5151;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				margin-right: 12rpx;
			}

		}

		.middle {
			margin: 16rpx 0;
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
			word-wrap: break-word;
			word-break: break-all;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.bottom {
			margin-top: 24rpx;
			display: flex;
			// justify-content: space-between;
			align-items: center;

			// .left-box {
			// 	display: flex;

			// 	// width: 50%;
			// }

			.title-right {
				// width: 96rpx;
				min-width: 96rpx;
				text-align: center;
				border-radius: 8rpx;
				font-size: 24rpx;
				padding: 8rpx 24rpx;
				margin-right: 16rpx;
			}

			.title-ongoing {
				color: #858585;
				background-color: #DBDBDB;
			}

			.title-dyz {
				color: #fff;
				background-color: #04AFF1;
			}

			.title-yellow {
				color: #2B2B2B;
				background-color: #F9FF03;
			}

			.title-close {
				color: #2B2B2B;
				background-color: #FAC10D;
			}

			.title-finish {
				color: #fff;
				background-color: #FA0101;
			}

			.tags {
				margin-right: 20rpx;
				color: #0F53AC;
				padding: 6rpx 24rpx;
				border: 1px solid #0F53AC;
				border-radius: 8rpx;
				font-size: 24rpx;
				margin-right: 6rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				// background: #2173DE33;
			}

			.right-list {
				display: flex;
				align-items: center;
				font-size: 14px;
				font-weight: 400;
			}
		}

	}
	.list-wrapper:last-child{
		border-bottom: 1px solid #F5F5F5;
	}
	.item-title {
		font-size: 28rpx;
		font-weight: 400;
		text-align: center;
		background-color: #F5F5F5;
		color: #8C8C8C;
		padding: 28rpx 0;
	}

	.serachTop {
		display: flex;
		padding: 8rpx 32rpx;
		border-top: 1px solid #EDEDED;
		border-bottom: 1px solid #EDEDED;

		.sel {
			width: 40%;
		}

		.inp {
			width: 60% !important;
		}
		
		/deep/.zb-dropdown-menu__title{
			margin-left: -48rpx;
		}
	}

	.fixed-btn {
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;
		z-index: 99;
		width: 160rpx;
		height: 160rpx;
		opacity: 1;
		background: rgba(15, 83, 172, 1);
		box-shadow: 0px 2px 6px rgba(10, 61, 128, 0.4);
		border-radius: 50%;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		color: #fff;
	
		.btn-icon {
			margin-top: 20rpx;
			font-size: 60rpx;
	
			image {
				width: 72rpx;
				height: 72rpx;
			}
		}
	
		.btn-txt {
			margin-top: 10rpx;
		}
	}
</style>
